<template>
	<view class="">
		<!-- <NavBar :title="type==0?'商家入驻申请':'商家信息'"></NavBar> -->
		<view class="MerchantApplication tn-padding-sm tn-padding-left tn-padding-right">
			<tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition"
				:labelWidth="labelWidth" :labelAlign="labelAlign">
				<tn-form-item label="商家名称" prop="bus_name" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="model.bus_name" :disabled="type==1" type="text" placeholder="商家名称"
						:border="border" :maxLength="16"></tn-input>
				</tn-form-item>
				<tn-form-item label="经营类别" prop="bus_type" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="model.bus_type" :disabled="type==1" type="select" placeholder="请选择商品类型"
						:border="border" :selectOpen="selectShow" @click="(type==0) && (selectShow = true)"></tn-input>
				</tn-form-item>
				<tn-form-item label="经营地址" prop="bus_address" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<view class="tn-flex">
						<tn-input v-model="model.bus_address" :disabled="type==1" class="tn-flex-1" type="text"
							placeholder="规格/品牌/产地/其他" :border="border"></tn-input>
						<text class="tn-icon-location-fill" style="width: 80rpx;font-size: 40rpx;"
							@click="getAddress"></text>
					</view>
				</tn-form-item>
				<tn-form-item label="营业执照" prop="bus_yyzz" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-image-upload :fileList="model.bus_yyzz" maxCount="1" ref="image1" @on-success="image1"
						:action="action" :autoUpload="false" :deleteable="type!=1" @on-list-change="imageUploadChange1">
					</tn-image-upload>
				</tn-form-item>
				<tn-form-item label="门头图片" prop="bus_mtz" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-image-upload :fileList="model.bus_mtz" maxCount="1" ref="image2" @on-success="image2"
						:action="action" :autoUpload="false" :deleteable="type!=1" @on-list-change="imageUploadChange2">
					</tn-image-upload>
				</tn-form-item>
				<tn-form-item label="联 系 人" prop="bus_lianxiren" :labelPosition="labelPosition"
					:labelAlign="labelAlign">
					<tn-input v-model="model.bus_lianxiren" :disabled="type==1" type="text" placeholder="联系人"
						:border="border" :maxLength="5"></tn-input>
				</tn-form-item>
				<tn-form-item label="联系电话" prop="bus_phone" :labelPosition="labelPosition" :labelAlign="labelAlign">
					<tn-input v-model="model.bus_phone" :disabled="type==1" type="number" placeholder="联系电话"
						:border="border" :maxLength="11"></tn-input>
				</tn-form-item>
			</tn-form>
			<view class="tn-flex tn-flex-direction-column" style="margin-bottom: 100rpx;">
				<text class="tn-text-bold tn-margin-top-xs tn-margin-bottom-xs">团长佣金:</text>
				<text class="tn-margin-bottom-xs">商家要对接团长，需要质押佣金，得到团长确认对接扣除佣金， 没有获得团长确认，其他佣金原路退回。</text>
				<view class="">
					<text class="tn-text-bold tn-margin-top-xs tn-margin-bottom-xs">质押佣金对照表:</text>
					<view class="tn-margin-top-xs tn-padding-xs"
						style="border-radius: 20rpx;border: 1px solid #d8d8d8;">
						<view class="tn-flex tn-flex-row-around tn-padding-bottom-xs">
							<text class="tn-flex-1 tn-text-center">等级</text>
							<text class="tn-flex-1 tn-text-center">参与数(人)</text>
							<text class="tn-flex-1 tn-text-center">佣金</text>
						</view>
						<view class="">
							<view class="tn-flex tn-flex-row-around tn-margin-bottom-xs tn-margin-top-xs"
								v-for="v in jicaiTzyjData" :key="v.id">
								<text class="tn-flex-1 tn-text-center">{{v.dengjis}}级</text>
								<text class="tn-flex-1 tn-text-center">{{v.canyu1+'-'+v.canyu2}}</text>
								<text class="tn-flex-1 tn-text-center">{{v.yongjins}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-flex tn-flex-row-center tn-flex-col-center" v-if="type==0" style="height: 200rpx;">
				<tn-button shape="round" backgroundColor="#ff1313" fontSize="32" width="350rpx" height="80rpx"
					fontColor="tn-color-white" @click="submit">提交申请
				</tn-button>
			</view>
			<view class="tn-flex tn-flex-row-center tn-flex-col-center" v-if="userType==2" style="height: 200rpx;">
				<tn-button shape="round" backgroundColor="#ff1313" fontSize="32" width="350rpx" height="80rpx"
					fontColor="tn-color-white">审核中
				</tn-button>
			</view>
			<!-- 商品类型select -->
			<tn-select v-model="selectShow" mode="single" :list="selectList" @confirm="bus_typeSelectConfirm">
			</tn-select>
		</view>
	</view>

</template>

<script>
	// import NavBar from '../../components/NavBar/NavBar.vue'
	import {
		jicaiTypeApi
	} from '../../apis/indexApi.js'
	import {
		addBusApi,
		busDetailApi,
		jicaiZhiyaApi
	} from '../../apis/MerchantApplicationApi.js'
	import {
		httpURL,
		BASEURL
	} from '../../utlis/http.js'
	import {
		useTestTel
	} from '../../utlis/hook.js'
	export default {
		components: {
			// NavBar
		},
		data() {
			return {
				errorType: ['message', 'border-bottom', 'toast'],
				labelPosition: 'left',
				labelAlign: 'right',
				border: false,
				action: BASEURL + '/index/upimage',
				labelWidth: 140,
				selectShow: false,
				type: 0,
				userType: 0,
				imageStatus: 0,
				latitude: '',
				longitude: '',
				selectList: [{
					label: '手机',
					value: 1101
				}],
				model: {
					bus_name: '',
					bus_type: '',
					bus_address: '',
					bus_yyzz: [],
					bus_mtz: [],
					bus_lianxiren: '',
					bus_phone: ''
				},
				bus_yyzz: [],
				bus_mtz: [],
				jicaiTzyjData: [],
				rules: {
					bus_name: [{
							required: true,
							message: '请输入商家名称',
							trigger: 'blur'
						},
						{
							min: 1,
							max: 10,
							message: '姓名长度在1到10个字符',
							trigger: ['change', 'blur'],
						}
					],
					bus_phone: [{
							required: true,
							message: '请输入手机号码',
							trigger: 'change'
						},
						{
							min: 11,
							max: 11,
							message: '手机号码应有11个字符',
							trigger: ['change', 'blur'],
						}
					],
					bus_lianxiren: [{
						required: true,
						message: '请输入联系人',
						trigger: 'change'
					}],
					bus_type: [{
						required: true,
						message: '商品类型不能为空',
						trigger: 'change'
					}],
					bus_yyzz: [{
						required: true,
						message: '请选择图片',
						trigger: 'change',
						type: 'array'
					}],
					bus_mtz: [{
						required: true,
						message: '请选择图片',
						trigger: 'change',
						type: 'array'
					}]
				},

			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onLoad(props) {
			props.type && (this.type = props.type);
			uni.setNavigationBarTitle({
				title: (props.type ? props.type : this.type) == 0 ? '商家入驻申请' : '商家信息'
			});
			props.userType && (this.userType = props.userType);
			if (props.userType ? props.userType == 2 : false) {
				this.type = 1
			}
			let thsi = this;
			jicaiTypeApi().then(res => {
				if (res.data.msg == '成功') {
					thsi.selectList = [];
					res.data.data.forEach(v => {
						thsi.selectList.push({
							label: v.name,
							value: v.id
						})
					})
				}
			}).catch(err => {
				console.log(err)
			})
			jicaiZhiyaApi().then(res => {
				// console.log(res)
				if (res.data.msg == '成功') {
					this.jicaiTzyjData = res.data.data;
				}
			}).catch(err => {
				console.log(err)
			})
			if (props.type == 1 || props.userType == 2) {
				busDetailApi(uni.getStorageSync('user').u_id).then(res => {
					if (res.data.msg == '成功') {
						let _data = res.data.data;
						_data.bus_yyzz = [{
							url: httpURL + res.data.data.bus_yyzz
						}];
						_data.bus_mtz = [{
							url: httpURL + res.data.data.bus_mtz
						}];
						this.model = res.data.data;
					}
				}).catch(err => {
					console.log(err)
				})
			}
		},
		methods: {
			click(event) {
				this[event.methods] && this[event.methods](event)
			},
			// 表单提交
			submit() {
				this.$refs.form.validate(valid => {
					if (valid) {
						// 验证通过
						// console.log(this.model)
						uni.showLoading({
							title: '加载中',
							mask: true
						});
						this.$refs.image1.upload();
						this.$refs.image2.upload();
					} else {
						// 验证失败
					}
				})
			},
			image1(data) {
				console.log('111', data)
				this.imageStatus++;
				this.model.bus_yyzz = data.info;
			},
			image2(data) {
				console.log('222', data)
				this.imageStatus++;
				this.model.bus_mtz = data.info;
			},
			// 点击商品类型列选择器
			bus_typeSelectConfirm(event) {
				this.model.bus_type = `${event[0]['label']}`
			},

			// 图片有修改
			imageUploadChange1(lists) {
				this.model.bus_yyzz = lists
			},
			imageUploadChange2(lists) {
				this.model.bus_mtz = lists
			},
			getAddress() {
				if (this.type == 1) {
					return
				}
				uni.chooseLocation({
					success: (res) => {
						// console.log(res)
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						this.model.bus_address = res.name;
					},
					fail() {

					}
				})
			},
		},
		watch: {
			imageStatus: {
				handler() {
					if (this.imageStatus === 2) {
						// console.log(this.model)
						let _this = this;
						if (!useTestTel(_this.model.bus_phone)) {
							uni.showToast({
								title: '请输入正确的手机号',
								duration: 2000
							})
							return
						}
						let _data = {
							...this.model,
							u_id: uni.getStorageSync('user').u_id,
							bus_longitude: this.longitude,
							bus_latitude: this.latitude
						}
						addBusApi(_data).then(res => {
							// console.log(res)
							let user = uni.getStorageSync('user') || {};
							user.longitudeMerchant = _this.longitude;
							user.latitudeMerchant = _this.latitude;
							uni.setStorageSync('user', user);
							if (res.data.msg == '成功') {
								uni.redirectTo({
									url: '/pages/CentralizedProcurementBiddingInformation/CentralizedProcurementBiddingInformation'
								})
								uni.hideLoading();
							}
						}).catch(err => {
							console.log(err)
						})
					}
				}
			}
		}
	}
</script>


<style lang="scss" scoped>
	.MerchantApplication {
		width: 750rpx;
		// border-radius: 20rpx;
		// border: 1px solid #959595;
		background-color: #ffffff;
	}
</style>
